<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MonkeyCMS</title>
<link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
<link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
<script type="text/javascript" src="statics/js/jquery.min.js"></script>
<script type="text/javascript" src="statics/js/prettify.js"></script>
<script type="text/javascript" src="statics/js/monkey.js"></script>

</head>

<body>
<!--page_header-->
<div class="page_header">
	<h3>按钮</h3>
	<p>全站通用按钮组件，无图片纯 css 实现，IE8 以下无圆角。可以很方便的和 <code>.iconfont</code> 配合使用。</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

	<h4>默认按钮</h4>
			<p>任何赋予 <code>.u_button</code> 类的页面元素都会显示按钮样式。</p>

			<table class="u_table">
				<thead>
					<tr>
						<th>按钮</th>
						<th>样式</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><button class="u_button u_button_gray">默认</button></td>
						<td><code>u_button u_button_gray</code></td>
						<td>带渐变的标准灰色按钮</td>
					</tr>
					<tr>
						<td><button class="u_button u_button_blue">蓝色</button></td>
						<td><code>u_button u_button_blue</code></td>
						<td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
					</tr>
					<tr>
						<td><button class="u_button u_button_red">红色</button></td>
						<td><code>u_button u_button_red</code></td>
						<td>表示这个动作危险或存在危险</td>
					</tr>
					<tr>
						<td><button class="u_button u_button_green">绿色</button></td>
						<td><code>u_button u_button_green</code></td>
						<td>表示成功或积极的动作</td>
					</tr>
					<tr>
						<td><button class="u_button u_button_orange">橙色</button></td>
						<td><code>u_button u_button_orange</code></td>
						<td>提醒应该谨慎采取这个动作</td>
					</tr>
					<tr>
						<td><button class="u_button u_button_black">黑色</button></td>
						<td><code>u_button u_button_black</code></td>
						<td>备用的暗灰色按钮，不依赖于语义和用途</td>
					</tr>
					<tr>
						<td><button class="u_button u_button_link">链接</button></td>
						<td><code>u_button u_button_link</code></td>
						<td>简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为</td>
					</tr>
				</tbody>
			</table>


			<h4>按钮大小</h4>
			<p>想使用更大或更小的按钮吗？添加 <code>.u_button_large</code>、 <code>.u_button_middle</code> 或 <code>.u_button_small</code> 即可改变按钮大小。</p>

			<h5>大按钮 <code>u_button_large</code></h5>
			<p>
				<button class="u_button u_button_gray u_button_large">默认大按钮</button>
				<button class="u_button u_button_blue u_button_large">蓝色大按钮</button>
				<button class="u_button u_button_red u_button_large">红色大按钮</button>
				<button class="u_button u_button_green u_button_large">绿色大按钮</button>
				<button class="u_button u_button_orange u_button_large">橙色大按钮</button>
				<button class="u_button u_button_black u_button_large">黑色大按钮</button>
			</p>

			<pre class="prettyprint linenums">
&lt;p&gt;
  &lt;button class="u_button u_button_gray u_button_large"&gt;默认大按钮&lt;/button&gt;
  &lt;button class="u_button u_button_blue u_button_large"&gt;蓝色大按钮&lt;/button&gt;
  &lt;button class="u_button u_button_red u_button_large"&gt;红色大按钮&lt;/button&gt;
  &lt;button class="u_button u_button_green u_button_large"&gt;绿色大按钮&lt;/button&gt;
  &lt;button class="u_button u_button_orange u_button_large"&gt;橙色大按钮&lt;/button&gt;
  &lt;button class="u_button u_button_black u_button_large"&gt;黑色大按钮&lt;/button&gt;
&lt;/p&gt;</pre>


			<h5>中按钮 <code>u_button_middle</code></h5>
			<p>
				<button class="u_button u_button_gray u_button_middle">默认中按钮</button>
				<button class="u_button u_button_blue u_button_middle">蓝色中按钮</button>
				<button class="u_button u_button_red u_button_middle">红色中按钮</button>
				<button class="u_button u_button_green u_button_middle">绿色中按钮</button>
				<button class="u_button u_button_orange u_button_middle">蓝色中按钮</button>
				<button class="u_button u_button_black u_button_middle">蓝色中按钮</button>
			</p>

			<pre class="prettyprint linenums">
&lt;p&gt;
  &lt;button class="u_button u_button_gray u_button_middle"&gt;默认中按钮&lt;/button&gt;
  &lt;button class="u_button u_button_blue u_button_middle"&gt;蓝色中按钮&lt;/button&gt;
  &lt;button class="u_button u_button_red u_button_middle"&gt;红色中按钮&lt;/button&gt;
  &lt;button class="u_button u_button_green u_button_middle"&gt;绿色中按钮&lt;/button&gt;
  &lt;button class="u_button u_button_orange u_button_middle"&gt;蓝色中按钮&lt;/button&gt;
  &lt;button class="u_button u_button_black u_button_middle"&gt;蓝色中按钮&lt;/button&gt;
&lt;/p&gt;</pre>


			<h5>小按钮 <code>u_button_small</code></h5>
			<p>
				<button class="u_button u_button_gray u_button_small">默认小按钮</button>
				<button class="u_button u_button_blue u_button_small">蓝色小按钮</button>
				<button class="u_button u_button_red u_button_small">红色小按钮</button>
				<button class="u_button u_button_green u_button_small">绿色小按钮</button>
				<button class="u_button u_button_orange u_button_small">橙色小按钮</button>
				<button class="u_button u_button_black u_button_small">黑色小按钮</button>
			</p>

			<pre class="prettyprint linenums">
&lt;p&gt;
  &lt;button class="u_button u_button_gray u_button_small"&gt;默认小按钮&lt;/button&gt;
  &lt;button class="u_button u_button_blue u_button_small"&gt;蓝色小按钮&lt;/button&gt;
  &lt;button class="u_button u_button_red u_button_small"&gt;红色小按钮&lt;/button&gt;
  &lt;button class="u_button u_button_green u_button_small"&gt;绿色小按钮&lt;/button&gt;
  &lt;button class="u_button u_button_orange u_button_small"&gt;橙色小按钮&lt;/button&gt;
  &lt;button class="u_button u_button_black u_button_small"&gt;黑色小按钮&lt;/button&gt;
&lt;/p&gt;</pre>


			<h4>禁用状态</h4>
			<p>添加 <code>u_button_disable</code> 让按钮看起来无法点击。</p>

			<p>
				<button class="u_button u_button_gray u_button_disable">默认按钮</button>
				<button class="u_button u_button_blue u_button_disable">蓝色按钮</button>
			</p>

			<pre class="prettyprint linenums">
&lt;p&gt;
  &lt;button class="u_button u_button_gray u_button_disable"&gt;默认按钮&lt;/button&gt;
  &lt;button class="u_button u_button_blue u_button_disable"&gt;蓝色按钮&lt;/button&gt;
&lt;/p&gt;</pre>


			<h4>一个类支持多种标签</h4>
			<p>可以给 <code>&lt;a&gt;</code> 、 <code>&lt;button&gt;</code> 或 <code>&lt;input&gt;</code> 元素添加.u_button类。</p>

			<p>
				<a href="#" class="u_button u_button_gray">A标签 默认按钮</a>
				<button class="u_button u_button_gray">Button 默认按钮</button>
				<input type="submit" value="Input 默认按钮" class="u_button u_button_gray" />
			</p>

			<pre class="prettyprint linenums">
&lt;p&gt;
  &lt;a href="#" class="u_button u_button_gray"&gt;A标签 默认按钮&lt;/a&gt;
  &lt;button class="u_button u_button_gray"&gt;Button 默认按钮&lt;/button&gt;
  &lt;button type="submit" value="Input 默认按钮" class="u_button u_button_gray" /&gt;
&lt;/p&gt;</pre>

			
			<h4>和iconfont组合</h4>
			<p>可以给 <code>&lt;a&gt;</code> 、 <code>&lt;button&gt;</code> 元素添加中添加 <code>iconfont</code>。</p>

			<p>
				<a href="#" class="u_button u_button_gray"><span class="iconfont">&#xf012;</span> 默认按钮</a>
				<button class="u_button u_button_blue"><span class="iconfont">&#xf069;</span> 默认按钮</button>
				<button class="u_button u_button_orange"><span class="iconfont">&#xf02b;</span> 默认按钮</button>
			</p>


</div>
<!--/page_main-->
</body>
</html>